<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style type="text/css">
	.inputbtn{ height:35px;width:90px; }
	td1{ width:35%; }
	td2{ width:35%; }
	td3{ width:15%; }
	td4{ width:15%; }
</style>
<div class="right-panel">
	<div class="header">
		<h1>碎片编辑页面</h1>
	</div>
	
	<div class="right-operation">
		<h2>碎片编辑</h2>
		<table>
			<thead>
				<tr>
					<td class="td1">碎片key</td>
					<td class="td2">碎片value</td>
					<td class="td3">操作</td>
					<td class="td4">操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="td1"><input type="text" id="key0"/></td>
					<td class="td2"><input type="text" id="val0"/></td>
					<td class="td3"><input type="button" value="增加" class="inputbtn" data-ops="add" data-index="0"/></td>
					<td class="td4"></td>
				</tr>
				<c:forEach items="${data}" var="a" varStatus="s">
				<tr>
					<td class="td1"><input type="text" id="key${s.count}" value="${a.key}" disabled="disabled"/></td>
					<td class="td2">
						<textarea id="val${s.count}" style="display:block; height:100px;width:500px;margin:5px auto 5px auto;">${a.value}</textarea>
					</td>
					<td class="td3"><input type="button" value="更新" class="inputbtn" data-ops="update" data-index="${s.count}"/></td>
					<td class="td4"><input type="button" value="删除" class="inputbtn" data-ops="delete" data-index="${s.count}"/></td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</div>

<script type="text/javascript">
	(function(){
		var _ops = function(ops,index){
			var k = $("#key" + index).val();
			var v = $("#val" + index).val();
			var url = "/admin_t/operation?p=fragment&t=" + ops;
			$.ajax({
				url:url,
				cache:false,
				data:"k=" + encodeURIComponent(k) + "&v=" + encodeURIComponent(v),
				dataType:"json",
				success:function(json){
					if( json && json.code == 200 ){
						window.location.reload(false);
					}else{
						alert("操作失败,错误代码:" + json.msg);
					}
				},
				error:function(){
					alert("操作失败!");
				}
			});
		}
		
		var init = function(){
			$(".inputbtn").each(function(){
				var t = $(this);
				var ops = t.attr("data-ops");
				var index = t.attr("data-index");
				if( !ops || ops.length == 0 || !index || index.length == 0){
					return ;
				}
				t.click(function(){
					_ops(ops,index);
				});
			});
		}
		init();
	})();
</script>